<!DOCTYPE html>
<html>
	<head>
		<head>
			<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
			<title>大嘿嘿后台管理</title>
			<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
			<!-- <link rel="stylesheet" type="text/css" href="css/antd.css" /> -->
			<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
			
			<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/axios-0.18.0.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/interfaceuRL.js" type="text/javascript" charset="utf-8"></script>

			
			<link rel="stylesheet" type="text/css" href="css/主页.css" />
			<!-- <link rel="stylesheet" type="text/css" href="css/main.css"/> -->
			<script type="text/javascript">
				$(document).ready(function(e) {
					$(".but1").click(function(e) {
						$(".ul1").toggle();
					});
				});

				$(document).ready(function(e) {
					$(".but2").click(function(e) {
						$(".ul2").toggle();
					});
				});

				$(document).ready(function(e) {
					$(".but3").click(function(e) {
						$(".ul3").toggle();
					});
				});
				$(document).ready(function(e) {
					$(".but4").click(function(e) {
						$(".ul4").toggle();
					});
				});
				$(document).ready(function(e) {
					$(".but5").click(function(e) {
						$(".ul5").toggle();
					});
				});
				$(document).ready(function(e) {
					$(".but6").click(function(e) {
						$(".ul6").toggle();
					});
				});
				$(document).ready(function(e) {
					$(".but7").click(function(e) {
						$(".ul7").toggle();
					});
				});
				$(document).ready(function(e) {
					$(".but8").click(function(e) {
						$(".ul8").toggle();
					});
				});
			</script>
		</head>
	<body>
	
		<div id="app">
			<!-- 上 导航栏 -->
				<div id="all" style="width: 100%; margin: auto;">
					<div id="hh1">
					<header id="back">
						<div id="" style="color: white;width: 50%;">
						<h2 style="line-height: 25px;height: 25px;">博客后台管理系统</h2>
						</div>
							<div class="head_menu">
								<p style="color: white;">超级管理员&nbsp;&nbsp;&nbsp;&nbsp;</p>
								<!--用户名，退出-->
								<ul class="nav content" style="width:80px;height:25px;line-height: 25px;" >
									<li style="color: white;">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="color: white;"> {{userInfo}}<span class="caret"></span></a>
										  
										<ul class="dropdown-menu">
											<li ><a href="./login.html" @click="log_out()">退出</a></li>
										  </ul>	
										  </li>	
								</ul>
								<!-- 转换背景颜色 -->
								<ul class="nav right" style="width: 100px;height:25px;line-height: 25px;">
									<li>
										<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
											<span><a-icon type="skin" title="换肤" style="font-size: 20px;color: white;height: 30px;line-height: 30px;" /></span>
											</a>
									<ul class="dropdown-menu" >
									<!-- <span ><button type="button" class="rong" title="换肤"></button></span> -->
								            <li><a href="#" id="black">黑色(默认)</a></li>
								            <li><a href="#" id="green">绿色</a></li>
								            <li><a href="#" id="blue">蓝色</a></li>
											<li><a href="#" id="red">红色</a></li>
											<li><a href="#" id="pink">粉色</a></li>
								            <li><a href="#" id="plum">紫色</a></li>
								          </ul>	
										  </li>	
								</ul>
							</div>						
					</div>
				</div>
				<header>
		<!--     页面布局    中  -->
			<div class="content">
			<div class="hh2">

				<div id="left">

					<input type="button" class="but1" value="用户管理" />
					<ul class="ul1" style="display:none">
						<li id="a2"><a href="yhgl.html" target="a1">用户管理</a></li>
					</ul>

					<input type="button" class="but2" value="文章管理" />
					<ul class="ul2" style="display:none">
						<li id="a2"><a href="wenzgl.html" target="a1">文章管理</a></li>
					</ul>

					<input type="button" class="but3" value="分类管理" />
					<ul class="ul3" style="display:none">
						<li id="a2"><a href="flguanli.html" target="a1">分类管理</a></li>
					</ul>

					<input type="button" class="but4" value="评论管理" />
					<ul class="ul4" style="display:none">
						<li id="a2"><a href="plun.html" target="a1">评论管理</a></li>
					</ul>

					<input type="button" class="but5" value="留言管理" />
					<ul class="ul5" style="display:none">
						<li id="a2"><a href="message.html" target="a1">留言管理</a></li>
					</ul>

					<input type="button" class="but6" value="公告管理" />
					<ul class="ul6" style="display:none">
						<li id="a2"><a href="post.html" target="a1">公告管理</a></li>
					</ul>

					<input type="button" class="but7" value="管理员管理" />
					<ul class="ul7" style="display:none">
						<li id="a2"><a href="Admin.html" target="a1">管理员管理</a></li>
					</ul>

					<input type="button" class="but8" value="点赞统计" />
					<ul class="ul8" style="display:none">
						<li id="a2"><a href="dz.html" target="a1">点赞统计</a></li>
					</ul>
				</div> 
				<div class="right">
				<div class="show1">
					<p><a href="main.html" style="width: 15%; height:20px;">我的桌面</a></p>
				</div>
				<div class="show2">
					
					<iframe src="index.html" width="100%" height="500px" name="a1" scrolling="yes" >
					<!-- <iframe src="" name="contentPage" width="100%" height="93%" scrolling="yes" style="background-image: url(img/index-1.jpg);width: 100%;height:92%;"></iframe> -->
				</div>
				<!-- <iframe src="" width="70%" height="600px" name="a1" scrolling="yes" style="background-image: url(img/index-1.jpg);width: 90%;height:500px;">
				
					
				</iframe> -->  
				
			</div>
			</div>

		</div>
		
		<!-- 下 -->
		<div class="footer">
			<h5 style="color: gainsboro; text-align: center;">大嘿嘿社区管理</h5>
		</div>
		
		</div>
	</body>
</html>

<script type="text/javascript">
	var vm = new Vue({
		el: "#app",
		data: { 
			userInfo: "",
		},
		methods: {
			log_out: function() {
				//清空回话存储
				var sessionStorage = window.sessionStorage;
				sessionStorage.clear();

				//刷新网页
				window.location.reload();

			}
		},
		beforeMount: function() {
			var sessionStorage = window.sessionStorage;
			this.userInfo = sessionStorage.getItem("supername");
			this.email = sessionStorage.getItem("email")
		}
	})
</script>
<!-- 导航栏颜色转换 -->
<script type="text/javascript">
	var black = document.getElementById('black');
	var green = document.getElementById('green');
	var blue = document.getElementById("blue");
	var red = document.getElementById("red");
	var pink = document.getElementById("pink");
	var plum = document.getElementById("plum");
	var back = document.getElementById("back");
	let array1 = ["black"];
	let array2 = ["green"];
	let array3 = ["blue"];
	let array4 = ["red"];
	let array5 = ["pink"];
	let array6 = ["plum"];
	
	let index = 0;
	black.onclick = function() {
		back.style.backgroundColor = array1[index];
								index = (index + 1) % array1.length;
	}

	green.onclick =  function() {
		back.style.backgroundColor = array2[index];
				index = (index + 1) % array2.length;
	}

	blue.onclick = function() {
		back.style.backgroundColor = array3[index];
						index = (index + 1) % array3.length;
	}
	
	red.onclick = function() {
		back.style.backgroundColor = array4[index];
								index = (index + 1) % array4.length;
	}
	
	pink.onclick = function() {
		back.style.backgroundColor = array5[index];
								index = (index + 1) % array5.length;
	}
	
	plum.onclick = function() {
		back.style.backgroundColor = array6[index];
								index = (index + 1) % array6.length;
	}
</script>
